<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2024/3/23
  Time: 15:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户列表</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("li").mouseover(function (event) {
                $("#d").show();
                <%--$.get("${pageContext.request.contextPath}/findById.product?id="+$(this).attr("data-id"),--%>
                <%--    function(result){--%>
                <%--        console.log(result);--%>
                <%--    },"json");--%>
                <%--$.getJSON("${pageContext.request.contextPath}/findById.product?id="+$(this).attr("data-id"),--%>
                <%--    function(result){--%>
                <%--        console.log(result);--%>
                <%--    });--%>
                $.ajax({
                    // type表示指定请求方式,默认值为get
                    type: "post",
                    url: "${pageContext.request.contextPath}/findById.product",
                    data: {"id": $(this).attr("data-id")},
                    dataType: "json",    // 默认值为text
                    success: function (product) {
                        $("#d").css("left", event.clientX);
                        $("#d").css("top", event.clientY);
                        $("#s1").html(product.id);
                        $("#s2").html(product.name);
                        $("#s3").html(product.price);
                    },
                    error: function () {
                        console.log("出错啦")
                    }
                });
            });
            $("li").mouseout(function () {
                $("#d").hide();
            });
        })
    </script>
</head>
<body>
<!--
    需求一:查询所有商品信息
    此处使用传统web请求,不需要使用Ajax实现
    此处列表中的所有数据均为数据库中t_product表中的数据
    页面中只展现商品名称
-->
<ul>
    <c:forEach items="${products}" var="product">
        <li data-id="${product.id}" >${product.name}</li>
    </c:forEach>
</ul>
<hr/>
<!--
    需求二:展现商品详情
    使用ajax实现该功能
    div默认是隐藏的,只有鼠标悬停在某个用户上的时候
    div出现在鼠标旁边,且div中显示鼠标悬停的用户的详情
    当鼠标离开用户选项的时候,div自动隐藏
-->
<div id="d" style="background-color: #dddddd;width: 200px;padding: 10px;display: none;position: absolute;">
    编号:<span id="s1">1</span><br/>
    商品名称:<span id="s2">aaa</span><br/>
    商品单价:<span id="s3">111</span><br/>
</div>
</body>
</html>